@extends('admin.layout.base')
@section('styles')
@endsection
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body">
            <div class="panel-header">
                <div class="panel-title"> 投标记录【{{ $demand_title }}】 </div>
                <el-tabs v-model="tabValue" type="card" @tab-click="search()"></el-tabs>
            </div>
            <div class="panel-main">
                <div class="panel-btns">
                    <el-button type="success" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>
                </div>
                <el-table v-loading="loading"
                          element-loading-text="努力加载中..."
                          element-loading-spinner="el-icon-loading"
                          ref="multipleHandle"
                          tooltip-effect="dark"
                          sortable='custom'
                          @sort-change="sortChange"
                          @selection-change="handleSelectionChange"
                          :data="listData.data" border>
                    <el-table-column align="center" type="selection" width="40"></el-table-column>
                    <el-table-column align="center" :show-overflow-tooltip="true" prop="bid_sn" label="单号" width="120"></el-table-column>
                    <el-table-column align="center" prop="demand.title" label="需求" :show-overflow-tooltip="true" width="150"></el-table-column>
                    <el-table-column align="center" prop="user_name" label="需求发布者" width="120"></el-table-column>
                    <el-table-column align="center" prop="store_name" label="投标供应商" :show-overflow-tooltip="true" width="150"></el-table-column>
                    <el-table-column align="center" prop="contract_price" label="合同总金额" width="110"></el-table-column>
                    <el-table-column align="center" prop="bid_fee" label="服务费比例(%)" width="120"></el-table-column>
                    <el-table-column align="center" prop="real_fee" label="服务费金额" width="110"></el-table-column>
                    <el-table-column align="center" prop="bid_status_text" label="中标" width="80">
                        <template slot-scope="scope"> <span v-html="scope.row.bid_status_text"></span> </template>
                    </el-table-column>
                    <el-table-column align="center" prop="contract_status_text" label="上传合同" width="110">
                        <template slot-scope="scope"> <span v-html="scope.row.contract_status_text"></span> </template>
                    </el-table-column>
                    <el-table-column align="center" prop="pay_status_text" label="支付" width="80">
                        <template slot-scope="scope"> <span v-html="scope.row.pay_status_text"></span> </template>
                    </el-table-column>
                    <el-table-column align="center" prop="bid_time" label="投标时间" width="160"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button v-if="state == 0" @click="active(scope.row.id)" icon="fa fa-unlock-alt" type="success" size="mini" plain>中标</el-button>
                            <el-button v-if="scope.row.contract_status == 2 && scope.row.pay_status == 1" @click="pay(scope.row.id)" icon="fa fa-unlock-alt" type="success" size="mini" plain>完成订单</el-button>
                            <a v-if="scope.row.contract_status == 2 && scope.row.contract_documents_pdf != null" target="_blank" :href="scope.row.contract_documents_pdf"><el-button icon="fa" size="mini" plain>查看合同</el-button></a>
                            <el-button v-if="scope.row.contract_status == 2 && scope.row.contract_documents_img != null" @click="show(scope.row)" icon="fa" size="mini" plain>查看合同</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination"  v-if="listData && listData.total">
                    <div class="pagination-total">共 <em> @{{listData.total}} </em> 条记录</div>
                    <el-pagination v-if="listData.last_page > 1"
                                   background
                                   :page-size="listData.per_page"
                                   layout="prev, pager, next, jumper"
                                   :total="listData.total"
                                   prev-text="上一页"
                                   next-text="下一页"
                                   :current-page="listData.current_page"
                                   @current-change="changePage">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- 表单弹窗-->
        <el-dialog
                v-if="dialog.show"
                :title="dialog.title"
                :top="dialog.top"
                :visible.sync="dialog.show"
                :width="dialog.width">
            <el-form :model="form" ref="form" label-width="100px">
                <el-form-item label="合同文件：" prop="evaluate_contract_img">
                    <div width="100%">
                        <el-image width="100%" v-for="item in form.contract_documents_img" :src="item" :fit="fits"></el-image>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog.show = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    listData: [],//列表数据
                    cateCascader: [],//连级类目
                    tabValue: 0,//tab
                    date: null,//日期范围
                    params: {kwd:'', name:'', page:1, status:0, start:'', end:'', cid:0, sort:''},
                    loading: false,
                    multipleSelection:[],//多选项
                    state:0,//当前需求是否有人中标 0:没有 1:有
                    dialog: {
                        title: '',
                        top: '15vh',
                        show: false,
                        width: '1000px'
                    },
                    fits: 'cover',
                }
            },
            created(){
                this.params.demand_id = " {{ $demand_id }}";
                this.list();
            },
            methods: {
                //分页
                changePage(val) {
                    this.params.page = val;
                    this.list();
                },
                //列表
                list(){
                    let that = this;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('admin.bid.list') }}",this.params,function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.listData = res.data[0];
                                that.state = res.data[1];
                                that.loading = false;
                            }
                        },'JSON');
                    },500);
                },
                //编辑
                show(info){
                    this.form = {
                        contract_documents_pdf: info.contract_documents_pdf,
                        contract_documents_img: info.contract_documents_img,
                        _token: "{{csrf_token()}}"
                    };
                    this.dialog.title = '查看合同';
                    this.dialog.show = true;
                },
                //激活
                active(id){
                    let that = this;
                    $.post("{{ route('admin.bid.active') }}",{id: id, _token: "{{csrf_token()}}"},function (res) {
                        if(res.code){
                            that.$message.error(res.msg);
                        }else{
                            that.list();
                        }
                    },'JSON');
                },
                //激活
                pay(id){
                    let that = this;
                    this.$confirm('请确认供应商已经支付服务费，并已收到？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.post("{{ route('admin.bid.pay') }}",{id: id, _token: "{{csrf_token()}}"},function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.list();
                            }
                        },'JSON');
                    }).catch(() => {});
                },
                //排序
                sortChange(column){
                    switch (column.order) {
                        case 'ascending':
                            this.params.sort = 'asc';
                            break;
                        case 'descending':
                            this.params.sort = 'desc';
                            break;
                        default:
                            break;
                    }
                    this.list();
                },
                // 多选删除
                multiDelete(){
                    if(this.multipleSelection.length == 0){
                        this.$message.error('请至少选择一项你要删除的项');return false;
                    }
                    this.destroy(this.multipleSelection);
                },
                handleSelectionChange(val) {
                    let select = [];
                    if(val.length > 0){
                        val.filter((item)=>{
                            if(select.indexOf(item.id) === -1){
                                select.push(item.id)
                            }
                        });
                        this.multipleSelection = select;
                    }else{
                        this.multipleSelection = [];
                    }
                },
                //删除
                destroy(id){
                    let that = this;
                    this.$confirm('确定要删除选中的活动信息吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.post("{{ route('admin.bid.destroy') }}",{id: id, _token: "{{csrf_token()}}"},function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.list();
                            }
                        },'JSON');
                    }).catch(() => {});
                },
            }
        });
    </script>
@endsection
